<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>交管12123 首页</title>
</head>
<body>
<!--------总容器-------->
<div class="upper">
    <!--------search-------->
    <div class="search">
        <div class="search-box">
            <i class="fa fa-search"></i>搜索
        </div>
        <i class="fa fa-bars"></i>
    </div>
    <!--------主要功能-------->
    <ul class="main-function">
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/01.jpg" onclick="location.href='car.html'"/>
            <p onclick="location.href='car.html'">琼CA1234</p>
        </li>
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/02.jpg" onclick="location.href='license.html'"/>
            <p onclick="location.href='license.html'">驾驶证</p>
        </li>
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/03.jpg"/>
            <p>电子证件凭证</p>
        </li>
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/05.jpg"/>
            <p>消息</p>
        </li>
    </ul>
    <!--------功能分类-------->
    <div class="wrapper" style="background: linear-gradient(to bottom,#3362a6,#eff0f4);">
        <ul class="all-function">
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/06.jpg"/>
                <p>事故视频<br> &nbsp;&nbsp;&nbsp;快处</p>
            </li>
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/07.jpg"/>
                <p>违法处理<br>&nbsp;</p>
            </li>
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/08.jpg"/>
                <p>学法减分<br>&nbsp;</p>
            </li>
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/09.jpg"/>
                <p>新车选号<br>&nbsp;</p>
            </li>
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/10.jpg"/>
                <p>驾驶证补<br>&nbsp;&nbsp;&nbsp;换领</p>
            </li>
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/11.jpg"/>
                <p>备案非本<br>人机动车<br></p>
            </li>
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/12.jpg"/>
                <p>一键挪车<br>&nbsp;</p>
            </li>
            <li>
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/13.jpg"/>
                <p>更多<br>&nbsp;</p>
            </li>
        </ul>
    </div>
        <!--------消息-------->
    <ul class="center">
        <li>
            <div class="center1">
                <div class="center1-content1">
                    <div class="center1-content1-left">
                        <h3>资讯中心</h3>
                        <p style="color: #888"> | </p>
                        <p>海南省 定安县</p>
                    </div>
                    <div class="center1-content1-right">
                        <p>&gt;</p>
                    </div>
                </div>
                <div class="line"></div>
                <div class="center1-content2">
                    <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/14.jpg"/>
                    <div class="center1-content2-right">
                        <h3>以下几种行为是危险驾驶！</h3>
                        <p>2024-07-03</p>
                    </div>
                </div>
            </div>
        </li>
            <!--------公布公示-------->
        <li>
            <div class="center1">
                <div class="center1-content1">
                    <div class="center1-content1-left">
                        <h3 onclick="location.href='publish.html'">公布公示</h3>
                    </div>
                    <div class="center1-content1-right">
                        <p onclick="location.href='publish.html'">&gt;</p>
                    </div>
                </div>
                <div class="line"></div>
                <div class="center1-content2">
                    <div class="img2">
                        <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/15.jpg"/>
                    </div>
                </div>
            </div>
        </li>
            <!--------服务中心-------->
        <li>
            <div class="center1">
                <div class="center1-content1">
                    <div class="center1-content1-left">
                        <h3>服务中心</h3>
                        <p style="color: #888"> | </p>
                        <p>匠心打造完整服务体系</p>
                    </div>
                    <div class="center1-content1-right">
                        <p>&gt;</p>
                    </div>
                </div>
                <div class="line"></div>
                <div class="center1-content2">
                    <div class="img3">
                        <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/16.jpg"/>
                    </div>
                </div>
            </div>
        </li>

    </ul>
    <!--------底部-------->
    <ul class="bottom">
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/17.jpg"/>
            <p>首页</p>
        </li>
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/18.jpg"/>
            <p>网办进度</p>
        </li>
        <li>
            <div class="bottom-icon">
                <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/19.jpg"/>
                <p>网办大厅</p>
            </div>
        </li>
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/20.jpg"/>
            <p>线下网点</p>
        </li>
        <li>
            <img src="../font-awesome-4.7.0/font-awesome-4.7.0/pictures/21.jpg" onclick="location.href='my.html'"/>
            <p onclick="location.href='my.html'">我的</p>
        </li>
    </ul>
</div>
</body>
</html>